<!--  -->
<template>
    <div class="">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item
                v-for="(item,index) in collapseData"
                :key="index"
                :title="item.title"
                :name="item.name"
            >
                <el-tag
                    :key="tag"
                    v-for="tag in item.tagName"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag,item.tagName)"
                >{{tag}}</el-tag>
                <el-input
                    class="input-new-tag"
                    v-if="inputVisible===item.name"
                    v-model="inputValue"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(item.name)"
                    @blur="handleInputConfirm(item.name)"
                ></el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput(item.name)">添加管理员</el-button>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      dynamicTags: ["张三","李四","王五"],
      inputVisible: "",
      inputValue: "",
      activeNames: ["1"],
      collapseData: [
        { title: "系统管理员", name: "1",tagName:["张三","李四"] },
        { title: "产权管理员", name: "2",tagName:["王五"] },
        { title: "经营管理员", name: "3" },
        { title: "财务管理员", name: "4" }
      ]
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleChange(val) {
      console.log(val);
    },
    handleClose(tag,data) {
      console.log(data);
      for (let index = 0; index < data.length; index++) {
      data.splice(data[index].indexOf(tag), 1);
      }
    },

    showInput(type) {
      console.log(type);
      this.inputVisible = type;
      this.$nextTick(_ => {
        // this.$refs.saveTagInput.input.focus();
      });
    },

    handleInputConfirm(type) {
      type = parseInt(type);
      let inputValue = this.inputValue;
      if (inputValue) {
        this.collapseData[type-1].tagName.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>